<template>
  <div class="homebox">
    <div class="top">
      <h3>饿了么</h3>
      <van-search v-model="value" shape="round" background="#01a3ff" placeholder="请输入搜索关键词" />
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in bannerlist" :key="index">
        <img v-lazy="item.bannerUrl" />
      </van-swipe-item>
    </van-swipe>

    <div class="tabbox">
      <div class="tabboxtop">猜你喜欢</div>
      <div class="sortbox">
        <span>综合排序</span>
        <span>距离最近</span>
        <span>销量最高</span>
        <span>筛选<span class="iconfont icon-shaixuan"></span></span>
      </div>
      <div class="hometabbar">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
      </div>
    </div>

    <div class="homeshoplist">
      <div class="item" v-for="(item, index) in shoplist" :key="index" @click="toDetail(item.mtWmPoiId)">
        <div class="homeshoplistimgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="wordbox">
          <div class="wenzi">
            <span class="name">{{ item.name }}</span>
            <div>
              <span class="Score">{{ item.wmPoiScore }}</span>
              <span class="sale">{{ item.monthSalesTip }}</span>
            </div>
          </div>
          <div class="fee">
            <div class="peisong">
              <span class="PriceTip">{{ item.minPriceTip }}</span>
              <span class="shippingFeeTip">{{ item.shippingFeeTip }}</span>
            </div>
            <div class="far">
              <span class="deliveryTimeTip">{{ item.deliveryTimeTip }}</span>
              <span class="distance">{{ item.distance }}</span>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script setup>
import { banner_list, shop_list } from '../../api/index'
import { ref, onMounted } from 'vue'



var bannerlist = ref([])
var shoplist = ref([])
var currentIndex = ref(0)
onMounted(() => {
  //请求店铺列表
  shop_list().then((res) => {
    shoplist.value = res.data.list;
  }),
    //请求轮播图列表
    banner_list().then((res) => {
      bannerlist.value = res.data.list;
    })
})

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.homebox {
  height: 90%;
}

.homebox .top {
  background-color: #01a3ff;
  padding: 10px;
}

.homebox .top h3 {
  color: white;
  margin-bottom: 10px;
}

.homebox .top .van-swipe {
  height: 10%;
  width: 100%;
}

.van-swipe .van-swipe-item {
  box-sizing: border-box;
  padding: 5px;

}

.van-swipe .van-swipe-item img {
  width: 100%;
  border-radius: 5px;
}

/* ------------------------------------------- */
.tabbox {
  box-sizing: border-box;
  height: 10%;
  width: 100%;
  padding: 0px 10px;
}

.tabbox .tabboxtop {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.tabbox .sortbox,
.hometabbar {
  display: flex;
  justify-content: space-between;
}

.box .sortbox span {
  padding: 5px 13px;
}

.tabbox .sortbox .iconfont {
  padding: 5px 0px;
}

.tabbox .hometabbar span {
  font-size: 13px;
  padding: 5px 10px;
  background-color: #f3f3f3;
}

.homeshoplist {
  box-sizing: border-box;
  height: 60%;
  width: 100%;
  padding: 10px;
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 0
}

.homeshoplist .item {
  height: 100px;
  display: flex;
  margin-bottom: 5px;

}

.homeshoplist .item img {
  height: 80px;
  width: 90px;
}

.homeshoplist .item .wordbox {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  box-sizing: border-box;
  padding: 0px 8px;

}

.homeshoplist .item .wordbox .wenzi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.homeshoplist .item .wordbox .wenzi .name {
  font-weight: 700;
  margin-bottom: 10px;
}

.homeshoplist .item .wordbox .wenzi div {
  font-size: 12px;
  margin-bottom: 10px;
}

.homeshoplist .item .wordbox .wenzi div .Score {
  color: orange;
  margin-right: 15px;
}

.homeshoplist .item .wordbox .wenzi div .sale {
  color: grey;
}

.homeshoplist .item .wordbox .fee {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: grey;
}

.homeshoplist .item .wordbox .fee .PriceTip,
.deliveryTimeTip {
  margin-right: 5px;
}
</style>
